<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!-- {{这个是插值表达式,没什么特殊含义,就是两组大括号的形式}} -->
    <div class="box">Hello {{name}}</div>
    <!-- 
        Vue中有2种数据绑定的方式:
        1.单向绑定(v-bind):数据只能从data流向页面。
        2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
        备注:
        1.双向绑定一般都应用在表单类元素上(如:input、select等
        2.v-model:value可以简写为 v-model，因为v-model默认收集的就是value值。
     -->
     <!-- 
        MVVM模型
        1.M:模型(Model) : data中的数据
        2.V:视图(View）:模板代码
        3.VM:视图模型(ViewModel): 
        Vue实例观察发现:
        1.data中所有的属性,最后都出现在了vm身上。
        2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。
      -->
    
</body>
<script>
    // 创建vue实例
    var v = new Vue({
        //el用于指定当前vue实例为那个容器服务,''里是选择器,可以是id选择器也可以是类选择器
        // el:'.box',   el第一种与指定容器绑定的方法(挂载到指定容器)
        data:{//data的第一种写法,称作对象式
            //data中进行数据的创建以及存储,供el所绑定的容器去使用
            name:'尚硅谷',
        },
        data:function(){//data的第二种写法,称作函数式,以后普遍用这种形式
            return{
                name:'尚硅谷'
            }
        }
        // data(){ ←这里可以简写,里面的this依旧是vue实例,但是用箭头函数(别用),里面的this就是windows对象
        //     return{
        //         name:'尚硅谷'
        //     }
        // }
        
    })
    //mount 原译就有 挂载 的意思且官方将vue解析内容到容器的动作就称作挂载(vue 挂载 到容器)
    v.$mount('.box')    //,el第二种方式,这种方式比较灵活
</script>
</html>